<template>
  <div class="container">
      <div class="hr28gray"></div>
      <label class="form-item border-b">
          <div class="flex">
              <img src="../../assets/icons/register/smartphone@2x.png" alt="" class="phone-icon" style="margin-right:0.36rem;">
              <div class="flex-con">
                  <input type="tel" v-model="formData.telephone" placeholder="请输入手机号码" class="telephone">
              </div>
          </div>
      </label>
      <label class="form-item border-b">
          <div class="flex">
              <img src="../../assets/icons/register/validcode.png" alt="" class="validcode-icon" style="margin-right:0.28rem;">
              <div class="flex-con">
                  <input type="number" v-model="formData.validcode" placeholder="请输入验证码" class="validcode">
              </div>
              <div class="getcode-btn" @click="getcode">
                  {{isSending?this.leftSeconds+'秒后重发':'获取验证码'}}
              </div>
          </div>
      </label>
      <div class="btnareas">
          <img src="../../assets/icons/register/okbtn.png" alt="" class="okbtn" @click="doSubmit">
      </div>
  </div>
</template>
<script>
import axios from "axios";
import { JWT_TOKEN } from "../../config/constants";
export default {
  data() {
    return {
      formData: {},
      isSending: false,
      leftSeconds: 60
    };
  },
  computed: {
    leftMinutes() {
      if (this.startTime > 0) {
        return this.nowTime - this.startTime;
      }
      return "";
    }
  },
  created() {
    this.startTime = new Date().getTime();
  },
  methods: {
    getcode() {
      if (this.isSending) {
        return;
      }
      if (this.$assert("isEmpty", this.formData.telephone, "请输入手机号码")) {
        return;
      }
      var reg = /^1[0-9]{10}$/;
      if (!reg.test(this.formData.telephone)) {
        this.$toast("手机号码格式不正确");
        return;
      }
      this.$post("/api/user/get_check_code", {
        telephone: this.formData.telephone
      }).then(_ => {
        this.$toast("发送验证码成功");
      });
      this.isSending = true;
      this.startTime = new Date().getTime();
      setTimeout(this.tickCount.bind(this), 1000);
    },
    tickCount() {
      let passedTime = new Date().getTime() - this.startTime;
      let s = 60 - parseInt(passedTime / 1000);
      this.leftSeconds = s;
      if (s < 0) {
        this.isSending = false;
      } else {
        setTimeout(this.tickCount.bind(this), 1000);
      }
    },
    doSubmit() {
      if (this.$assert("isEmpty", this.formData.telephone, "请输入手机号码")) {
        return;
      }
      if (this.$assert("isEmpty", this.formData.validcode, "请输入验证码")) {
        return;
      }
      this.showLoading();
      this.$post("/api/register", this.formData)
        .then(el => {
          this.hideLoading();
          localStorage.setItem(JWT_TOKEN, el);
          axios.defaults.headers["Authorization"] = el;
          this.$router.replace("/home");
        })
        .catch(_ => {
          this.hideLoading();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.btnareas {
  padding-top: 1.0133rem;
  .okbtn {
    width: 8.4667rem;
    height: 1.0667rem;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }
}
.validcode-icon {
  width: 0.48rem;
  height: 0.5733rem;
}
.form-item {
  padding: 0.3333rem 0.8rem;
  background-color: #fff;
  display: block;
  input {
    background-color: transparent;
    width: 100%;
    display: block;
    border: none;
    outline: none;
    font-size: 0.4rem;
  }
}
.phone-icon {
  width: 0.3867rem;
  height: 0.6267rem;
}
.getcode-btn {
  width: 2.4133rem;
  height: 0.72rem;
  line-height: 0.6933rem;
  border-radius: 0.36rem;
  font-size: 0.32rem;
  color: #666;
  text-align: center;
  border: solid 1px #9f9f9f;
}
.container {
  background: #f3f2f2;
}
.hr28gray {
  height: 28px;
  background-color: #ebebeb;
}
</style>
